import { t } from 'i18next'
import { Button, Modal, Select, Space } from '@kedacom/react-next'
import React, { useEffect } from 'react'
import { StyledWrap } from './style'
import { useVoiceInspireStore } from './store'
import shallow from 'zustand/shallow'
import { useMccStore } from '../../store'
import { fetchStartVoiceInspire, fetchStopVoiceInspire } from '@/api/manager/voiceInspire'
import Alert from '@/components/Alert'
const data = [
	{
		value: 3,
		label: '3s',
	},
	{
		value: 5,
		label: '5s',
	},
	{
		value: 15,
		label: '15s',
	},
	{
		value: 30,
		label: '30s',
	},
]
export default function VoiceInspire() {
	const { isOpen, _voiceInspireTime, update } = useVoiceInspireStore(
		(state) => ({
			isOpen: state.isOpen,
			_voiceInspireTime: state._voiceInspireTime,
			update: state.update,
		}),
		shallow
	)
	const { voiceInspireState, voiceInspireTime } = useMccStore(
		(state) => ({
			voiceInspireState: state.mccInfo.voiceInspireState,
			voiceInspireTime: state.mccInfo.voiceInspireTime,
		}),
		shallow
	)
	useEffect(() => {
		update({ _voiceInspireTime: voiceInspireTime })
	}, [voiceInspireTime])

	const handleClick = () => {
		let meetingMoid = useMccStore.getState().mccInfo.meetingMoid
		if (voiceInspireState) {
			fetchStopVoiceInspire(meetingMoid)
				.then((res) => {
					if (!res.success) {
						Alert(t('结束语音激励失败'))
					}
				})
				.catch(() => {
					Alert(t('结束语音激励失败'))
				})
		} else {
			fetchStartVoiceInspire(meetingMoid, _voiceInspireTime)
				.then((res) => {
					if (!res.success) {
						Alert(res.description || t('开始语音激励失败'))
					}
				})
				.catch(() => {
					Alert(t('开始语音激励失败'))
				})
		}
		update({ isOpen: false })
	}

	const onCancel = () => {
		update({ isOpen: false, _voiceInspireTime: 3 })
	}

	return (
		<Modal
			className="voice-inspire-modal"
			open={isOpen}
			title={t('提示')}
			needFooter={false}
			width={400}
			height={260}
			onCancel={onCancel}
		>
			<StyledWrap>
				<div className="content">
					<div className="label voice-activated-label__i18n">{t('语音激励')}</div>
					<Select
						width={200}
						value={_voiceInspireTime}
						options={data}
						disabled={Boolean(voiceInspireState)}
						panelPreventOverflow={false}
						onChange={(e, val) => {
							update({ _voiceInspireTime: val })
						}}
					/>
				</div>
				<Space space={6} className="btns">
					<Button onClick={handleClick}>{voiceInspireState ? t('结束') : t('开始')}</Button>
					<Button onClick={onCancel}>{t('取消')}</Button>
				</Space>
			</StyledWrap>
		</Modal>
	)
}
